<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>11_ajax</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script type="text/babel">
    /*
    需求:
      1. 界面效果如下
      2. 根据指定的关键字在github上搜索匹配的最受关注的库
      3. 显示库名, 点击链接查看库
      4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars
    */
    class MostStarRepo extends React.Component {
        state = {
            repoName: '',
            repoUrl: ''
        };

        componentDidMount() {
            //使用axios发送异步ajax请求
            const url = 'https://api.github.com/search/repositories?q=r&sort=stars';
            /*axios.get(url)
                .then(response => {
                    const result = response.data;
                    //console.log(result);
                    //得到数据
                    const {name, html_url} = result.items[0];
                    //更新状态
                    this.setState({repoName: name, repoUrl: html_url})
                }).catch(error => {
                // debugger
                console.log(error);
                alert('请求失败 ' + error.message)
            });*/

            //使用fetch发送异步ajax请求
            fetch(url).then(response => {
                return response.json();
            }).then(data => {
                //console.log(data);
                //得到数据
                const {name, html_url} = data.items[0];
                //更新状态
                this.setState({repoName: name, repoUrl: html_url})
            }).catch(error => {
                // debugger
                console.log(error);
                alert('请求失败 ' + error.message)
            });
        }

        render() {
            const {repoName, repoUrl} = this.state;
            if (!repoName) {
                return <h2>Loading...</h2>
            } else {
                return <h2>Most Star Repo is <a href={repoUrl}>{repoName}</a></h2>
            }
        }
    }

    ReactDOM.render(<MostStarRepo/>, document.getElementById('example'));

</script>
</body>
</html>



